<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>基本资料</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../../res/js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style>
		/*a  upload js代码 */
		.a-upload {
			padding: 4px 10px;
			height: 40px;
			line-height: 30px;
			position: relative;
			left: 150px;
			top: -60px;
			cursor: pointer;
			color: #888;
			background: #fafafa;
			border: 1px solid #ddd;
			border-radius: 4px;
			overflow: hidden;
			display: inline-block;
			*display: inline;
			*zoom: 1
		}

		.a-upload  input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			cursor: pointer
		}

		.a-upload:hover {
			color: #444;
			background: #eee;
			border-color: #ccc;
			text-decoration: none
		}
		.input-group{
			position: absolute;
			left:-150px;
			top:55px;
		}
		#prePic{
			position: absolute;
			left: 170px;
			top: 0px;
		}
	</style>
</head>
<body class="user-info">
<form class="layui-form" lay-filter="myfrom" id="myfrom1">
	<input type="hidden" name="userId">
	<div class="user_left">
		<div class="layui-form-item">
			<label class="layui-form-label" >用户名</label>
			<div class="layui-input-block">
				<input type="text" name="userName" value="智走" disabled style="width: 280px" class="layui-input layui-disabled">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户手机号</label>
			<div class="layui-input-block">
				<input type="tel" name="userPhone" style="width: 280px" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户邮箱</label>
			<div class="layui-input-block">
				<input type="tel" name="userMail"  style="width: 280px" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出生年月</label>
			<div class="layui-input-block">
				<input id="uDate" type="text" style="width: 280px" value="" placeholder="请输入出生年月" lay-verify="required"
				       class="layui-input userBirthday">
			</div>
		</div>
		<div class="layui-form-item" style="height: 95px;">
			<label class="layui-form-label" style="width: 90px;padding-top: 40px">个人头像</label>
			<div class="layui-input-inline" style="position: relative;top: 30px;">
				<div class="input-group">
					<a href="javascript:;" class="a-upload"> <input type="file" name="imgFile" id="imgFile" >点击这里上传文件</a>
				</div>
			</div>
			<div class="layui-form-mid layui-word-aux"><img src="" id="prePic" width="90px" height="90px"></div>
		</div>
		<div class="layui-form-item userAddress">
			<label class="layui-form-label">家庭住址</label>
			<div class="layui-input-inline">
				<select name="province" lay-filter="province">
					<option value="">请选择省</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<select name="city" lay-filter="city" disabled>
					<option value="">请选择市</option>
				</select>
			</div>
			<div class="layui-input-inline">
				<select name="area" lay-filter="area" disabled>
					<option value="">请选择县/区</option>
				</select>
			</div>
		</div>
	</div>
	<div class="layui-form-item" style="margin-left: 5%;">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
<script type="text/javascript" src="user-info.js"></script>
<script>
	$(function () {
		//文件查看
		$('#imgFile').change(function () {
			//获取input file的files文件数组;
			//$('#usersImage')获取的是jQuery对象，.get(0)转为原生对象;
			//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
			var file = $('#imgFile').get(0).files[0];
			//创建用来读取此文件的对象
			var reader = new FileReader();
			//使用该对象读取file文件
			reader.readAsDataURL(file);
			//读取文件成功后执行的方法函数
			reader.onload = function (e) {
				//读取成功后返回的一个参数e，整个的一个进度事件
				console.log(e);
				//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
				//的base64编码格式的地址
				$('#prePic').get(0).src = e.target.result;
			}
		});
	})
</script>
</body>
</html>
